葫芦的运维日志

下一篇 搜索 上一篇

---

实现目标:

子vue属性发生变更，父vue关联的属性同时变更。

1.子vue:

注册click事件,通过$emit发送事件,参数第一位为父vue的监听事件名，第二位为所传属性isCollapse。

this.$emit('changeMargin', this.isCollapse)
 

<template>
  <div>
        <i v-if="!isCollapse" class="el-icon-d-arrow-left" @click="asidechange()"></i>
        <i v-if="isCollapse" class="el-icon-d-arrow-right" @click="asidechange()"></i>
  </div>
</template>
  export default {

    data() {
      return {
        isCollapse: false
      }
    },
    methods: {
      asidechange() {
        this.isCollapse = !this.isCollapse
        this.$emit('changeMargin', this.isCollapse)
      }
    }
  }

2.父vue:

父vue通过@changeMargin接收子vue所传事件,通过changeMargin($event)方法 更新自己的isMargin属性。

  changeMargin(isCollapse) {
        this.isMargin = isCollapse
        console.log(isCollapse)
      }

<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <el-container>
      <el-aside width="180px">
        <Aside @changeMargin="changeMargin($event)"></Aside>
      </el-aside>

      <el-main :class="{ margin: isMargin }">
        <router-view></router-view>

      </el-main>
    </el-container>
  </el-container>

</template>

<script>
  import Header from '@/views/home/Header.vue'
  import Aside from '@/views/home/Aside.vue'

  export default {
    name: "Index",
    data() {
      return {
        isMargin: false
      }
    },
    components: {
      Header,
      Aside
    },
    methods: {
      changeMargin(isCollapse) {
        this.isMargin = isCollapse
        console.log(isCollapse)
      }
    }
  }
</script>

 

葫芦的运维日志

打赏

上一篇 搜索 下一篇